<template>
  <view class="flex-center flex-col">
    <text class="text-blue font-bold text-lg">我的</text>

    <!-- 判断是否已登录 -->
    <template v-if="isLoggedIn">
      <image :src="userInfo && userInfo.avatar" class="w100 h100 mb-5 rounded-full" />
      <text class="text-lg font-bold">{{ userInfo && userInfo.userName }}</text>
      <button class="mt-5" @click="handleLogout">退出登录</button>
    </template>

    <!-- 未登录时显示去登录按钮 -->
    <template v-else>
      <text>您还未登录，请先登录</text>
      <button class="mt-5" @click="goToLoginPage">去登录</button>
    </template>
  </view>
</template>

<script setup>
import { computed } from "vue";
import { useUserStore } from "@/store/modules/user";

// 使用 pinia
const userStore = useUserStore();

// 计算属性：是否已登录
const isLoggedIn = computed(() => !!userStore.token);

// 计算属性：用户信息
const userInfo = computed(() => userStore.userInfo);

/**
 * 跳转到登录页面
 */
const goToLoginPage = () => {
  uni.navigateTo({ url: "/pages/login/index" });
};

/**
 * 退出登录处理
 */
const handleLogout = () => {
  userStore.logout(); // 调用 Pinia store 的 logout 方法
  uni.showToast({ title: "已退出登录", icon: "success" });
};
</script>
